<!DOCTYPE html>
{% load static %}
{% load compress %}
{% load thumbnail %}
<html lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>{{APPLICATION_NAME}}</title>
    <link href="https://fonts.googleapis.com/css?family=Quicksand:300,400,500,700" rel="stylesheet">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css" />

    {% compress css %}
    <link href="{% static 'css/main.scss' %}" type="text/x-scss" rel="stylesheet">
    <link href="{% static 'css/mention.scss' %}" type="text/x-scss" rel="stylesheet">
    {% endcompress %}
    {% block extralinks %} {% endblock %}
  </head>
  <body class="main_body_bg_color">
    <div class="wrapper">

      <header>
        <nav class="navbar navbar-expand-lg navbar-dark fixed-top">

          <a class="navbar-brand" href="{% url 'common:dashboard' %}">{{APPLICATION_NAME}}</a>
          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <i class="fas fa-bars"></i>
          </button>
          {% if request.user.is_authenticated %}
          <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav mr-auto">
              <li class="nav-item"><a class="nav-link" id="dashboard" href="{% url 'common:dashboard' %}">Dashboard</a></li>
              {% if request.user.role == "ADMIN"  or request.user.is_superuser %}
              <li class="nav-item"><a class="nav-link" id="users" href="{% url 'common:users_list' %}">Users</a></li>
              {% endif %}
              <li class="nav-item"><a class="nav-link" id="accounts" href="{% url 'accounts:list' %}">Accounts</a></li>
              <li class="nav-item"><a class="nav-link" id="contacts" href="{% url 'contacts:list' %}">Contacts</a></li>
              <li class="nav-item"><a class="nav-link" id="leads" href="{% url 'leads:list' %}">Leads</a></li>
              <li class="nav-item"><a class="nav-link" id="opportunities"href="{% url 'opportunities:list' %}">Opportunities</a></li>
              <li class="nav-item"><a class="nav-link" id="cases" href="{% url 'cases:list' %}">Cases</a></li>
              <li class="nav-item"><a class="nav-link" id="documents" href="{% url 'common:doc_list' %}">Documents</a></li>
              {% if request.user.role == "ADMIN" or request.user.is_superuser %}
              <li class="nav-item"><a class="nav-link" id="users" href="{% url 'common:api_settings' %}">Settings</a></li>
              {% endif %}
            </ul>
            <ul class="navbar-nav navbar-right my-2 my-lg-0">
              <li class="nav-item dropdown">
                <a href="#" class="dropdown-toggle abcd nav-link" data-toggle="dropdown" role="button" aria-haspopup="true"
                  aria-expanded="false" >
                {% if not request.user.profile_pic %}
                <img src="{% static 'images/user.png' %}" alt="Micro profile pic">
                {% else %}
                {% thumbnail request.user.profile_pic "25x25" as im %}
                <img src="{{ im.url }}">
                {% endthumbnail %}
                {% endif %}
                <b class="caret"></b></a>
                <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
                  {% if request.user.email != "admin@micropyramid.com" %}
                  <a class="dropdown-item" href="/change-password/"><i class="fas fa-key"></i> Change Password</a>
                  {% endif %}
                  <a class="dropdown-item" href="{% url 'common:profile' %}"><i class="fas fa-user"></i> Profile</a>
                  <a class="dropdown-item" href="{% url 'common:logout' %}"><i class="fas fa-sign-out-alt"></i> Logout</a>
                </div>
              </li>
            </ul>
          </div>
          {% else %}
          <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav ml-auto my-2 my-lg-0">
              <li class="nav-item"><a class="nav-link" id="dashboard" href="{% url 'common:dashboard' %}">Login</a></li>
            </ul>
          </div>
          {% endif %}
        </nav>
      </header>

      <div id="mainbody" class="main_container" style="padding-top:65px;">

        {% block breadcrumb %}
        {% endblock %}

        {% block content %}
        {% endblock %}
      </div>

    </div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script>
    {% block js_block %}
    {% endblock js_block %}
    <script type="text/javascript">
      $(document).ready(function(){
          word = window.location.pathname.split('/')[1]
          if(word == ""){
            $("#dashboard").addClass('active')
          }
          else{
            $('#' + word).addClass('active')
          }
      });
    </script>
  </body>
</html>
